// import React, { Component } from "react";


// export default class ProductTable extends Component {
//   render() {
//     return (
//       <div>
//         <ProductCategoryRow></ProductCategoryRow>
//         <ProductRow ></ProductRow>
//       </div>
//     );
//   }
// }

import React, { Fragment } from 'react'
import ProductCategoryRow from "./ProductCategoryRow";
import ProductRow from "./ProductRow";

export default function ProductTable(props) {
   // console.log(props);
  return (
    <div>
        <div className='tr'>
            <div className='td'>Name</div>
            <div className='td'>Price</div>
        </div>
        {props.list.map((item,index)=>{

            return <Fragment key={index}>
               <ProductCategoryRow name={item.category}></ProductCategoryRow>
              <ProductRow list={item.list}></ProductRow>
            </Fragment>

        })}
     
    </div>
  )
}

